<div class="users_box">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 模糊搜索 -->
    <el-row class="search_box">
        <el-col :span="6">
            <el-input v-model="info.query" @input="() => this.info.pagenum = 1" placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </el-col>
        <el-col 
            :span="2"
            :offset="2">
            <el-button @click="() => this.addUserDialog = true" type="success">用户添加</el-button>
        </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row class="table_box">
        <el-table
        :data="users"
        border
        style="width: 1140px">
        <el-table-column
          type="index"
          label="序号"
          width="60">
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="role_name"
          label="身份名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="180">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="电话"
          width="160">
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="220">
          <!-- 作用域插槽 -->
          <template slot-scope="data">
            {{ data.row.create_time | format }}
          </template>
        </el-table-column>
        <el-table-column
            label="账号状态"
            width="120">
            <!-- data 接受的是一个数据集合, 里面的 row 表示当前行数据 -->
            <template slot-scope="data">
            <el-switch
                @change="changeUserStateHandler(data.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                v-model="data.row.mg_state"></el-switch>
            </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="160">
            <template slot-scope="data">
                <el-tooltip class="item" effect="dark" content="编辑" placement="left">
                <el-button @click="showUpdateUserDialogHandler(data.row.id)" icon="el-icon-edit" size="mini" type="success" circle></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button @click="delUserHandler(data.row.id)" icon="el-icon-delete" size="mini" type="danger" circle></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="分配权限" placement="right">
                <el-button @click="showRightsHandler(data.row)" icon="el-icon-setting" size="mini" type="primary" circle></el-button>
                </el-tooltip>
            </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页器 -->
    <el-row class="pagination">
        <el-pagination
        @size-change="val => this.info.pagesize = val"
        @current-change="val => this.info.pagenum = val"
        :current-page="info.pagenum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="info.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px">
      </el-pagination>
    </el-row>
    <!-- 添加用户 -->
    <el-dialog @closed="closeAddUserDialogHandler" title="添加用户" :visible.sync="addUserDialog">
      <el-form :rules="addUserRules" ref="addUser" :model="addUserInfo">
        <el-form-item prop="username" label="用户名" label-width="800">
          <el-input v-model="addUserInfo.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码" label-width="800">
          <el-input v-model="addUserInfo.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="800">
          <el-input v-model="addUserInfo.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="800">
          <el-input v-model="addUserInfo.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="() => this.addUserDialog = false">取 消</el-button>
        <el-button @click="addUserHandler" type="success">添 加</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户信息 -->
  <el-dialog title="编辑用户" :visible.sync="editUserDialog">
    <el-form ref="addUser" :model="editUserInfo">
      <el-form-item label="用户名" label-width="800">
        <el-input disabled :value="editUserInfo.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" label-width="800">
        <el-input v-model="editUserInfo.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话" label-width="800">
        <el-input v-model="editUserInfo.mobile" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="() => this.editUserDialog = false">取 消</el-button>
      <el-button @click="editUserHandler" type="success">确认编辑</el-button>
    </div>
  </el-dialog>
  <!-- 分配权限 -->
  <el-dialog title="权限分配" :visible.sync="rightsDialog">
    <el-form ref="addUser" :model="rightsInfo">
      <el-form-item label="用户名" label-width="800">
        <el-input disabled :value="rightsInfo.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="选择权限" label-width="800">
        <el-select v-model="rightsInfo.rights" placeholder="请选择">
          <el-option
            v-for="item in rightsList"
            :key="item.value"
            :label="item.roleName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- 点击取消按钮, 对话框消失 -->
      <el-button @click="() => this.rightsDialog = false">取 消</el-button>
      <el-button @click="editRightHandler" type="success">确认分配权限</el-button>
    </div>
  </el-dialog>
</div>